<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#earth{
				width: 310px;
				height: 310px;
				background-image: url(images/图层%201.png);
				border-radius: 200px;
				position: relative;
				/* 创建动画，设置参数
				 run动画名称 2s执行时效件 infinite 反复执行
				 速度不均匀，linear关键字
				 */
				animation: run 18s linear infinite;
			}
			#earth:hover{
				/* 鼠标移入暂停旋转 */
				animation-play-state: paused;
			}
			
			/* 定义动画关键帧
			 变形（形状变化）transform
			 rotate 旋转，0deg从0度开始旋转
			 */
			@keyframes run{
				from{left: 0px;}
				to{left: 500px;}
				
				from{transform: rotate(0deg);}
				to{transform: rotate(361deg);}
			}
		</style>
	</head>
	<body>
		<h3>地球旋转</h3>
		<div id="earth"></div>
		<audio src="" controls="controls">
			
		</audio>
	</body>
</html>
